zizhujianzhan_web/pages/xiangcunshangcheng/[dir]/gongying/[id].html.vue

<template>
    <ShopPageHead></ShopPageHead>
    <main class="index_main" id="all_vue">
        <HomeAdvertising :imgurl="adImg1"></HomeAdvertising>
        <ShopSubMenu></ShopSubMenu>
        <!-- 当前位置 -->
        <div class="categ_crumb_box clearfix_2">
            <div class="categ_crumb_left">
                <span class="categ_crumb_left_a" title=""> 当前位置： </span>
                <NuxtLink
                    :to="`/xiangcunshangcheng/index.html`"
                    class="categ_crumb_left_a"
                >
                    乡村商城
                </NuxtLink>
                &gt;
                <NuxtLink
                    :to="`/xiangcunshangcheng/${targetSegment}/index.html`"
                    class="categ_crumb_left_a"
                >
                    {{name}}
                </NuxtLink>
                &gt;
                <NuxtLink
                    :to="`/xiangcunshangcheng/${targetSegment}/gongying/list-1.html`"
                    class="categ_crumb_left_a"
                >
                    供应
                </NuxtLink>
                &gt;
                <span class="categ_crumb_left_text">{{shopData.name}}</span>
            </div>
        </div>

        <div class="supply_1_index clearfix">
            <img class="supply_1_img" :src="shopImg" :alt="shopData.name">
            <div class="supply_1_right">
                <h4 class="supply_1_h4">{{shopData.name}}</h4>
                <div class="supply_1_title_box clearfix">
                    <time class="supply_1_title"> 更新日期：{{shopData.updated_at}}</time>
                    <span class="supply_1_title">浏览次数：{{ shopData.hits }}</span>
                </div>
                <div class="supply_1_ul clearfix">
                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">公 司 名</label><span
                            class="supply_1_li_text ">{{ shopData.com }}</span></div>
                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">所 在 地</label><span
                            class="supply_1_li_text ">{{ shopData.address }}</span></div>
                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">联 系 人</label><span
                            class="supply_1_li_text ">{{ shopData.contact}}</span></div>
                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">产品单价</label><span
                            class="supply_1_li_text ">{{shopData.price}}元/{{ shopData.unit }}</span></div>
                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">最小定量</label><span
                            class="supply_1_li_text ">{{ shopData.min }}</span></div>
                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">供货总量</label><span
                            class="supply_1_li_text ">{{shopData.max}}</span></div>
                    <div class="supply_1_li clearfix"><label class="supply_1_li_label">有 效 期</label><span
                            class="supply_1_li_text ">{{getValidityTime(shopData)}}</span></div>
                </div>
            </div>
        </div>
        <div class="supply_2_index clearfix">

            <div class="supply_head_box clearfix_2">
                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 1 == supply_choice_1_num }"
                    @mouseover="supply_choice_1_num = 1">详情信息</a>
                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 2 == supply_choice_1_num }"
                    @mouseover="supply_choice_1_num = 2">联系方式</a>
                <a class="supply_head_a" title="" :class="{ supply_head_a_only: 3 == supply_choice_1_num }"
                    @mouseover="supply_choice_1_num = 3">图片展示</a>
            </div>

            <div class="supply_art_out clearfix">
                <!-- 详情信息 -->
                <div class="supply_art_box" v-show="supply_choice_1_num == 1" v-html="shopData.detail"></div>
                <!-- 联系方式 -->
                <div class="supply_art_box" v-show="supply_choice_1_num == 2">
                    <p class="supply_art_box_p">公司名：</p>
                    <p class="supply_art_box_p">联系人：{{shopData.contact}}</p>
                    <p class="supply_art_box_p">电话：{{shopData.phone}}</p>
                    <p class="supply_art_box_p">邮箱：{{shopData.email}}</p>
                    <p class="supply_art_box_p">邮政编码：{{shopData.postal}}</p>
                    <p class="supply_art_box_p">详细地址：{{shopData.address}}</p>
                </div>
                <!-- 图片展示 -->
                <div class="supply_art_box" v-show="supply_choice_1_num == 3">
                    <div class="supply_art_box_img">
                        <img :src="item" v-for="item in shopData.imgurl">
                    </div>
                </div>
            </div>
        </div>
        <ShopHotNews></ShopHotNews>
    </main>
    <HomeFoot></HomeFoot>
</template>

<script setup>
//1.页面必备方法 start ---------------------------------------->
import { ref, onMounted } from 'vue'
import { ElRadio, ElRadioGroup } from 'element-plus'
//1.2选项卡 
const supply_choice_1_num = ref(1)
//1.3是否展示有效期
const getValidityTime = (shopData) => {
    if(shopData.islong==1){
        return "无期限"
    }else{
        if(shopData.validity){
            return shopData.validity.split(' ')[0];
        }
    }
}
//1.页面必备方法 end ---------------------------------------->

//2.页面路径 start ---------------------------------------->
//2.1 获得页面数据id
const route = useRoute();
const router = useRouter()
let articleId = 0; //把路径转换为数据id
const name = ref('') //当前频道名称
const targetSegment = getRoutePath(2);//返回第二层的路径id
//通过导航路径反向查询导航id
const getRouteId = await requestDataPromise('/web/getWebsiteRoute', {
    method: 'GET',
    query: {
        'pinyin': targetSegment,
    },
});
if(getRouteId.code == 200){
    articleId = getRouteId.data.category_id;
    name.value = getRouteId.data.alias;
}else{
    console.log("错误位置：获得页面路径")
}

//2.3 获得子栏目列表
const secondNav = ref([]);
const selectedSecondId = ref(route.query.catid);//当前选中了哪个子导航
let getSecondNav = async () => {
    const listData = await requestDataPromise('/web/getWebsiteModelCategory', {
        method: 'GET',
        query: {
            'placeid': 1,
            'pid': articleId,
            'num': 50,
        },
    });
    if (listData.code == 200) {
        secondNav.value = listData.data
    } else {
        console.log("错误位置：获得子级栏目列表")
    }
}
getSecondNav();

//2.4 获得cityid
const cityId = ref(route.query.cityid)
//2.页面路径 end ---------------------------------------->

//3.获得商品详情 start ---------------------------------------->
const shopId = ref(route.params.id) //获得商品的id
const shopData = ref({});
const shopImg = ref("")

let getShopData = async () => {
    const shopReq = await requestDataPromise('/web/getWebsiteshopInfo', {
        method: 'GET',
        query: {
            'id': parseFloat(shopId.value),
        },
    });

    if (shopReq.code == 200) {
        console.log(667788)
        console.log(shopReq)
        shopData.value = shopReq.data
        shopImg.value = shopReq.data.imgurl[0]
    } else {
        console.log("错误位置：获得商品详情")
    }
}
getShopData();
//3.获得商品详情 end  ---------------------------------------->

//5.广告 start ---------------------------------------->
//获得所有广告
let adImg1 = ref({})
onMounted(async () => {
    const { $webUrl, $CwebUrl } = useNuxtApp();
    //从客户端启动广告
    //广告1
    let url = `${$webUrl}/web/getWebsiteAdvertisement?ad_tag=xcw_shopdetail_0001`
    const responseAd1 = await fetch(url, {
        headers: {
            'Content-Type': 'application/json',
            'Userurl': $CwebUrl,
            'Origin': $CwebUrl
        }
    });
    const resultAd1 = await responseAd1.json();
    adImg1.value = resultAd1.data[0];
})
//5.广告 end ---------------------------------------->
</script>
<style lang="less" scoped>
@import '@/assets/css/shop/detail.less';
</style>